<template>
  <div class="login_page">

    <!-- 导航 开始 -->
    <nav-bar title="手机登录"></nav-bar>
    <!-- 导航 end -->

    <!-- 提示语 开始 -->
    <div class="welcome">
      <h2 class="h2">您好！</h2>
      <h3 class="h3">欢迎来到邦正口腔</h3>
    </div>

    <!-- 登录框 开始 -->
    <div class="login_box">
      <div class="menus_box">
        <div class="menu_cell" :class="menuActive == item.id ? 'menu_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuEvent(item)">{{ item.name }}</div>
      </div>

      <!-- 手机号码登录 开始 -->
      <div class="form_box" v-if="menuActive == 1">
        <div class="cell">
          <img src="@/assets/images/my/phone.png" class="img" alt="">
          <div class="input_box">
            <input type="text" v-model="form.account" maxlength="11" class="a_input" placeholder="请输入手机号">
          </div>
        </div>
        <div class="cell">
          <img src="@/assets/images/my/code.png" class="img" alt="">
          <div class="input_box">
            <input type="text" v-model="form.code" class="a_input" placeholder="输入验证码">
          </div>
          <button class="btn" :disabled="time < 60" @click="sendCode" v-text="(time < 60) ? time + 's后获取' : '发送验证码'"></button>
        </div>
      </div>
      <!-- 手机号码登录 end -->

      <!-- 密码登录 开始 -->
      <div class="form_box" v-if="menuActive == 2">
        <div class="cell">
          <img src="@/assets/images/my/user.png" class="img" alt="">
          <div class="input_box">
            <input type="text" v-model="form.account" maxlength="11" class="a_input" placeholder="请输入用户名">
          </div>
        </div>
        <div class="cell">
          <img src="@/assets/images/my/password.png" class="img" alt="">
          <div class="input_box">
            <input type="password" v-model="form.code" class="a_input" placeholder="请输入密码">
          </div>
        </div>
      </div>
      <!-- 密码登录 end -->

      <!-- 登录按钮 开始 -->
      <div class="btn_group">
        <button class="btn" @click="loginEvent">登录</button>
      </div>
      <!-- 登录按钮 end -->

    </div>
    <!-- 登录框 end -->

    <!-- 用户协议 开始 -->
    <div class="agreement" @click="chooseAgreement">
      <div class="checkbox">
        <img src="@/assets/images/my/gou.png" class="img" alt="" v-if="!checked">
        <img src="@/assets/images/my/gou_active.png" class="img" alt="" v-else>
      </div>
      <div class="">
        登录/注册代表你同意<nuxt-link to="/contract/agreement" class="a_link">《哩哩用户条款》</nuxt-link><nuxt-link to="/contract/privacy" class="a_link">《哩哩隐私协议》</nuxt-link>
      </div>
    </div>
    <!-- 用户协议 end -->

</div>
</template>
<script>
import { PLATFORM_TYPE,LOGIN_BY_PASSWORD, GET_MESSAGE_CODE } from "@/http/interface";
import { showToast, checkPhone } from "@/utils/utils";
export default {
  data() {
    return {
      form: {},
      menus: [
        { name: "手机号登录", id: 1 },
        { name: "密码登录", id: 2 },
      ],
      menuActive: 1,
      checked: true,
      $axios: null,
      time: 60,
      timeInterval: "",
    };
  },
  async asyncData({ app }) {
    let token = app.$cookies.get("token");
    return {
      isLogin: token ? true : false,
      $axios: app.$axios,
    };
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      this.menuActive = row.id;
      this.$set(this.form, "code", "");
    },

    // 勾选用户协议
    chooseAgreement() {
      this.checked = !this.checked;
    },

    // 登录
    async loginEvent() {
      let _this = this;
      let oParams = JSON.parse(JSON.stringify(_this.form));

      if (!oParams.account) {
        showToast({
          message: "请输入手机号/用户名",
        });
        return false;
      }

      if (!oParams.code) {
        showToast({
          message: "请输入验证码/密码",
        });
        return false;
      }

      if (!this.checked) {
        showToast({
          message: "请仔细阅读用户协议和隐私协议",
        });
        return false;
      }

      oParams.loginType = _this.menuActive;
      oParams.platform = PLATFORM_TYPE;
      let res = await _this.$axios.post(LOGIN_BY_PASSWORD, oParams);
      if (res.code != 200) {
        showToast({
          message: res.message,
        });
        return false;
      }
      let obj = res.data || {};
      _this.$cookies.set("token", obj.token);
      _this.$cookies.set("user", obj.user);
      showToast({
        message: "登录成功",
        type: "success",
      });
      _this.$router.push({
        path: "/my",
      });
    },

    // 获取短信验证码
    async sendCode() {
      let _this = this;
      let o = this.form;
      let time = this.time;
      if (!o.account) {
        showToast({
          message: "请输入手机号",
        });
        return false;
      }

      if (!checkPhone(o.account)) {
        showToast({
          message: "手机号格式不正确",
        });
        return false;
      }
      let timeInterval = setInterval(function () {
        if (time <= 0) {
          clearInterval(timeInterval);
          _this.time = 60;
          return false;
        }
        time--;
        _this.time = time;
      }, 1000);
      let res = await this.$axios.get(GET_MESSAGE_CODE, {
        params: { mobile: o.account },
      });
      if (res.code == 200) {
        showToast({
          message: "发送成功",
          type: "success",
        });
      }
      console.log(res);
    },
  },
};
</script>
<style lang="less" scoped>@import "/assets/styles/my/login.less";</style>